<template>
	<view class="phone">
		<view class="line">
			<text>手机号码</text>
			<input v-model="phone" type="text" placeholder="请输入手机号码" />
			<view @click="getCode" class="getCode">获取验证码</view>
		</view>
		<view class="line">
			<text>验证码</text>
			<input v-model="code" type="text" placeholder="请输入验证码" />
		</view>
		<view @click="login" class="login">登录</view>
	</view>
</template>

<script setup>
import { getPhoneCode, PhoneLogin } from '@/api/loginApi.js'
import { ref } from 'vue'
import { useLoginStore } from '../../store/loginStore.js'
const code = ref('')
const phone = ref('')
const loginStore = useLoginStore()
const getCode = async () => {
	let { data } = await getPhoneCode(phone.value)
	if (data.code === 0) {
		code.value = data.data
	}
}
const login = async () => {
	let { data } = await PhoneLogin({ code: code.value, phone: phone.value })
	console.log(data)
	if (data.code === 0) {
		uni.showToast({
			icon: 'success',
			title: '登录成功'
		})
		//存储数据
		loginStore.id = data.data.userId
		loginStore.toked = data.data.token
		loginStore.phone = phone.value
		loginStore.nikeName = '手机用户'
		uni.setStorageSync('userId', data.data.userId)
		uni.setStorageSync('token', data.data.token)
		uni.setStorageSync('phone', phone.value)
		uni.setStorageSync('nikeName', '手机用户')
		uni.switchTab({
			url: '/pages/index/index'
		})
	} else {
		uni.showToast({
			icon: 'error',
			title: data.msg
		})
	}
}
</script>

<style lang="less" scoped>
.phone {
	padding: 30rpx;
	display: flex;
	align-items: center;
	flex-direction: column;

	.line {
		width: 686rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border: 1px solid #f2f2f2;
		border-left: none;
		border-right: none;
		box-sizing: border-box;
		margin-top: -1px;
		height: 100rpx;

		text {
			font-size: 32rpx;
			color: #333;
			width: 150rpx;
		}

		input {
			font-size: 28rpx;
		}

		.getCode {
			margin-left: auto;
			font-size: 24rpx;
			color: #aaa;
			background: #f2f2f2;
			height: 40rpx;
			width: 144rpx;
			line-height: 40rpx;
			text-align: center;
			border-radius: 2px;
		}
	}

	.login {
		width: 240rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #006eff;
		color: #fff;
		text-align: center;
		margin-top: 50rpx;
		border-radius: 4px;
	}
}
</style>
